<!Doctype>
<html>
<head>
<title></title>
 <link href="bootstrap.min.css" rel="stylesheet">
   <script src="jquery-3.3.1.min.js"></script>
   <script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
	<button type="button" class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
	<span class="border border-primary">
	<img src="logo1.jpg" alt="天空之境" class="rounded-circle">
	</span>
	</button>
    </div>
  </div>
	
	
    <div class="col-4">
	<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left"><p><a href="#" class="text-primary">君不见黄河之水天上来</a></p></button>
  <button type="button" class="btn btn-secondary float-right"><p><a href="#" class="text-white bg-dark">奔流到海不复回</a></p></button>
  <div class="d-inline p-2 bg-primary text-white">人生得意须尽欢</div>
  <div class="d-inline p-2 bg-dark text-white">莫使金樽空对月</div>
  <span class="d-block p-2 bg-primary text-white">天生我材必有用</span>
<span class="d-block p-2 bg-dark text-white">千金散去还复来</span>
    </div>
    </div>
	
  
  <div class="row justify-content-center">
   <div class="col-4">
	<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
      <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> 五花马</div>
      <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">千金裘</div>
      <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">呼儿将出换美酒</div>
      <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">与尔同销万古愁</div>
    </div> 
	  </div>
    </div>
	

    <div class="col-4">
	<div class="alert alert-warning alert-dismissible fade show" role="alert">
   <strong>唐宋八大家之一</strong>&nbsp&nbsp苏轼
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
	<div class="alert alert-primary" role="alert">
    大江东去，浪淘尽，千古风流人物
    </div>
    <div class="alert alert-secondary" role="alert">
    故垒西边，人道是，三国周郎赤壁
    </div>
    <div class="alert alert-success" role="alert">
    乱石穿空，惊涛拍岸，卷起千堆雪
    </div>
    <div class="alert alert-danger" role="alert">
    江山如画，一时多少豪杰
    </div>
    <div class="alert alert-warning" role="alert">
    遥想公瑾当年，小乔初嫁了，雄姿英发
    </div>
    <div class="alert alert-info" role="alert">
     羽扇纶巾，谈笑间，樯橹灰飞烟灭
    </div>
    <div class="alert alert-light" role="alert">
     故国神游，多情应笑我，早生华发
    </div>
    <div class="alert alert-dark" role="alert">
    人生如梦，一樽还酹江月
    </div>
    </div>
  
  
  
  <div class="row justify-content-end">
    <div class="col-4">
<h1>秋意<span class="badge badge-secondary">浓</span></h1>
<h2>秋意<span class="badge badge-secondary">浓</span></h2>
<h3>秋意<span class="badge badge-secondary">浓</span></h3>
<h4>秋意<span class="badge badge-secondary">浓</span></h4>
<h5>秋意<span class="badge badge-secondary">浓</span></h5>
<h6>秋意<span class="badge badge-secondary">浓</span></h6>
      
    </div>
    <div class="col-4">
	<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
  </div>
  
  
  <div class="row justify-content-around">
    <div class="col-4">
      <table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
    <div class="col-4">
      <table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
  </div>
  
  
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>
</body>
</html>